<template>
    <el-tabs type="border-card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="日历" name="Calendar">
            <Calendar />
        </el-tab-pane>

        <el-tab-pane label="" name="second">
            <template #label>
                <el-badge :value="12" class="item">
                    <span class="custom-tabs-label">
                        <span>待办</span>
                    </span>
                </el-badge>
            </template>
            <TodoList />
        </el-tab-pane>

        <el-tab-pane label="计划" name="third">Role</el-tab-pane>
    </el-tabs>
</template>
<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus';
import { ref } from 'vue';
import Calendar from '@/components/ToolComponents/Calendar.vue';
import TodoList from '@/components/Bussiness/TodoList.vue';
const activeName = ref('Calendar')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>